<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>FST Web Gallery</title>
	
	<script src="../../commons/mootools.v1.11.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../mookit/mookit.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../commons/HistoryManager.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../commons/reflection.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../mookit/darkbox/darkbox.js" type="text/javascript" charset="utf-8"></script>
	
	<style type="text/css" media="screen">
		/* YAHOO RESET */
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td { 
			margin:0;
			padding:0;
			font-family: "Helvetica Neue", Helvetica, Arial, sans; 
		}
		table {
			border-collapse:collapse;
			border-spacing:0;
		}
		fieldset,img { 
			border:0;
		}
		address,caption,cite,code,dfn,em,strong,th,var {
			font-style:normal;
			font-weight:normal;
		}
		ol,ul {
			list-style:none;
		}
		caption,th {
			text-align:left;
		}
		h1,h2,h3,h4,h5,h6 {
			font-size:100%;
			font-weight:normal;
		}
		q:before,q:after {
			content:'';
		}
		abbr,acronym { border:0;
		}
		
		/* Darkbox */
		.darkbox {
			color: #eee;
			/* DO NOT MODIFY BELOW THIS LINE */
			/* ANY CHANGES TO WIDTH, PADDING, MARGINS, ETC, SHOULD BE DONE IN THE ID STYLE */
		/*	position: fixed;*/
			position: absolute;
			overflow: hidden;
			left: 0;
			z-index: 100;
		}

		#darkbox_overlay {
			position: absolute;
			left: 0;
			width: 100%;
			background-color: #0c0c0c;
			z-index: 50;
		}

		.darkbox_invisible {
			visibility: hidden;
		}
	</style>
	<style type="text/css" media="screen">

		/* Web Gallery */
		html, body {
			background: #000;
			overflow: hidden;
/*			overflow:visible;
			overflow-x:visible;
			overflow-y:visible;*/
			color: #fff;
		}
		
		a, a:hover, a:active {
			text-decoration: none;
			color: #fff;
		}
		
		.hover {
			cursor: pointer;
		}
		
		#header, #footer { z-index: 20; }
		
		#header {
			background: #242424;
			height: 95px;
			min-width: 300px;
			border-bottom: 1px solid #2e2e2e;
		}
		#header #topbar {
			background: #1a1a1a;
			height: 60px;
			text-align: center;
			border-bottom: 1px solid #000;
		}
		#header #secondbar { border-top: 2px solid #1e1e1e; }
		#header a.button {
			display: block;
			float: left;
			border: 1px solid #252525;
			font-size: 12px;
			padding: 10px;
			margin: 10px;
		}
		#header #buttonright {
			float: right;
		}
		#header #title { margin-top: 10px; position: relative; top: 15px; }
		#header h1 { font-size: 150%; display: inline; padding-right: 3px; }
		#header #albumnumber { color: #666; }
		
		ul#tagbar { 
			list-style: none;
			text-align: center; 
			font-size: 11px; 
			margin: 3px auto 0;
		}
		#tagbar li {
			float: left;
			margin: 0 15px;
		}
		#tagbar li a {
			padding: 5px 15px;
			border: 1px solid #111410;
			background: #333;
			display: block;
			outline: 0;
			color: #aaa;
		}
		
		#container {
			clear: both;
			position: relative;
			overflow-y: auto !important;
			overflow-x: hidden !important;
			height: 200px;
			padding: 0 7px;
		}
		.block {
			width: 250px;
			height: 280px;
			margin-top: 10px;
			background: #000;
/*			border: 1px dotted #300;*/
			float: left;
			overflow: hidden;
		}
		.block .wrapper { position: relative; }
		.block .wrapper div { margin: 0 auto; }
		.block .title {
			position: relative; 
			top: 250px;
/*			margin-bottom: -11px;*/
			margin: 0 auto -11px;
/*			text-align: center;*/
			font-size: 11px;
			color: #ccc;
			z-index: 10;
		}
/*		#mainphoto { border: 1px solid #900;}*/
		#mainphoto #centerpiece { margin: 0 auto; border: 20px solid #000; }

/*		#m-text { 
			margin: 0 auto; 
		}
		#m-text table { 
			padding: 0;
			margin: 8px 0;
			width: 100%;
		}
		#m-text table td { vertical-align: bottom; }*/
		
		#mainphoto .title { font-size: 14px; }
		#mainphoto .description {
			font-size: 12px;
			line-height: 18px;
			color: #aaa;
		}
		
		#mainphoto #h-title, #mainphoto #h-description { margin: 0 auto; padding: 0 20px; }
		#mainphoto #h-title { margin-bottom: 10px; }
		#mainphoto #h-description { margin-top: 12px; }
		
		#hud {
			height: 60px;
			width: 162px;
			margin: 30px auto 0;
			background: url(images/hud.gif) center center no-repeat;
		}
		#hud #hud-prev { background-image: url(images/hud-left-arrows.gif) }
		#hud #hud-next { background-image: url(images/hud-right-arrows.gif) }
		#hud a {
			height: 38px;
			width: 42px;
			display: block;
			float: left;
			margin: 10px 20px 0 19px !important;
			margin: 10px 15px 0;
			background-position: center center;
			outline: 0;
		}
		#hud a.hover { background-position: bottom center; }
		#hud a.disabled { background-position: top center; }
		#hud a.disabled:hover { cursor: default; }
		
		#footer {
			background: #333;
			height: 40px;
			clear: both;
		}
		
	</style>
	
	<script type="text/javascript" charset="utf-8">
	/* KNOWN BUGS:
	 √ ie6/7: container scroller gets stuck. maybe resize() doesn't calculate correctly?
	 * still need to calculate vertical position via heights of all visible divs
	 √ darkbox overlay doesn't resize properly
	 √ resize: not accurate when window's height > width
	
	   TODO:
	 * darkbox hud: should not be completely transparent (shouldn't be able to "click thru")
	 * resize: automatic margin-size adjustment
	 * **********************************************************************************/
		var json = {
			id: "72157601708354184", primary: "1254061311", photo: [{id: "1254061311", secret: "6f54e4649c", server: "1235", farm: "2", title: "humongous!", isprimary: "1", originalsecret: "4666c2dc63", originalformat: "jpg", tags: "kairos kairos2 ", description: "mmmm... delicious!", datetaken: "2007-08-25 13:13:53", sizes: [{0: "100", 1: "66"}, {0: "240", 1: "159"}, {0: "500", 1: "332"}, {0: "1024", 1: "680"}, {0: "1600", 1: "1063"}], visibility: "isfriend isfamily "}, {id: "1254921990", secret: "724afb6ccc", server: "1369", farm: "2", title: "Aww yeah!", isprimary: "0", originalsecret: "888aba2af0", originalformat: "jpg", tags: "kairos kairos2 ", description: "This is a super long description, got a problem with that? Well, that's too bad, punk, because I'm not gonna change it. Nosirree Bob.", 
			datetaken: "2007-08-25 13:13:25", sizes: [{0: "100", 1: "66"}, {0: "240", 1: "159"}, {0: "500", 1: "332"}, {0: "1024", 1: "680"}, {0: "1600", 1: "1063"}], visibility: "isfriend isfamily "}, {id: "919019739", secret: "40410d377d", server: "1235", farm: "2", title: "Rock climbing at dimsum?", isprimary: "0", originalsecret: "4666c2dc63", originalformat: "jpg", tags: "kairos kairos2 ", description: "", datetaken: "2007-08-25 13:13:53", sizes: [{0: "100", 1: "66"}, {0: "159", 1: "240"}, {0: "332", 1: "500"}, {0: "680", 1: "1024"}, {0: "1600", 1: "1063"}], visibility: "isfriend isfamily "}, {id: "1254059865", secret: "034ed4ba42", server: "1399", farm: "2", title: "DSC_0705", isprimary: "0", originalsecret: "3425eddd96", originalformat: "jpg", tags: "kairos kairos2 ", description: "", datetaken: "2007-08-25 11:46:43", sizes: [{0: "100", 1: "66"}, {0: "240", 1: "159"}, {0: "500", 1: "332"}, {0: "1024", 1: "680"}, {0: "1600", 1: "1063"}], visibility: "isfriend isfamily "}, {id: "1254059101", secret: "e52b55c375", server: "1149", farm: "2", title: "DSC_0704", isprimary: "0", originalsecret: "38d1f92456", originalformat: "jpg", tags: "kairos kairos2 ", description: "", datetaken: "2007-08-25 11:46:07", sizes: [{0: "100", 1: "66"}, {0: "240", 1: "159"}, {0: "500", 1: "332"}, {0: "1024", 1: "680"}, {0: "1600", 1: "1063"}], visibility: "isfriend isfamily "}, {id: "1254058325", secret: "37cce3d8ae", server: "1306", farm: "2", title: "DSC_0703", isprimary: "0", originalsecret: "23984e3fa6", originalformat: "jpg", tags: "kairos kairos2 ", description: "", datetaken: "2007-08-25 11:45:06", sizes: [{0: "100", 1: "66"}, {0: "240", 1: "159"}, {0: "500", 1: "332"}, {0: "1024", 1: "680"}, {0: "1600", 1: "1063"}], visibility: "isfriend isfamily "}, {id: "1254057337", secret: "821f4ee155", server: "1159", farm: "2", title: "DSC_0701", isprimary: "0", originalsecret: "b66b9c1c4f", originalformat: "jpg", tags: "kairos kairos2 ", description: "", datetaken: "2007-08-25 11:44:54", sizes: [{0: "100", 1: "66"}, {0: "240", 1: "159"}, {0: "500", 1: "332"}, {0: "1024", 1: "680"}, {0: "1600", 1: "1063"}], visibility: "isfriend isfamily "}], total: "7", secret: "6f54e4649c", server: "1235", farm: "2", tags: "kairos kairos2 ", datetaken: "2007-08-25 13:13:53", title: "Kairos 2 Dim Sum", description: "", lastupdate: "01/02/08 00:12"
		};
		
		// Album class
		var Album = new Class({
			info: {
				id: 0, 
				primary: 0, 
				secret: '', 
				server: 0, 
				farm: 0,
				tags: '', 
				title: '',
				description: ''
			},  // end info{}
			
			initialize: function(json, fade_duration) {
				$extend(this.info, json);
				this.photos = {};
				this.prev_id = '';
				this.currentphoto = null;
				// set fade duration for Darkbox
				if (!fade_duration) fade_duration = 500;
				this.fade_duration = fade_duration;
				
				this.history = HistoryManager.register(
					'main',
					[0],
					function(args) { this.view(args[0]); }.bind(this),
					false,
					false
				);
					
				// cycle through photos
				var output = [];
				var prevPhotoId = false;
				var shiftdown = 0;
				var total = 0;
				json.photo.each(function(photo) {
					var photoObj = new Photo(photo, prevPhotoId);
					// set "next" photo.. for the previous one
					if (prevPhotoId) (this.photos[prevPhotoId]).setNext(photoObj.uniqueId());
					// add this photo to album collection
					this.photos[photoObj.uniqueId()] = photoObj; 
					
					prevPhotoId = photoObj.uniqueId();
					total++;
				}, this);
				
				this.total = total;

				// set up album page
				$('titlename').setHTML(this.info.title);
				$('albumnumber').setHTML(['(', this.total, ')'].join(''));

				// set photo controls
				['prev', 'next'].each(function(control) {
					var button = $('hud-' + control);
					button.addEvent('click', function(e) {
						new Event(e).stop();
						if (!button.hasClass('disabled')) this.view(button.getProperty('href'));
					}.bind(this));
				}, this);
				
				// add functionality to block elements
				var wrapper = null, img = null, caption = null, photo = null, shiftdown = 0, captionwidth = 0;
				$$('.block').each(function(block) {
					wrapper = block.getLast();
					img = wrapper.getFirst();
					caption = block.getFirst();
					photo = this.photos[block.id];
					
					// calculate px to shift: photoObj.sizes[1][1] = height of small-sized img
					shiftdown = 240 - photo.sizes[1][1]; 
					captionwidth = photo.sizes[1][0] - 5;
					wrapper.setStyle('top', shiftdown);
					// caption.setStyle('left', 250 - photo.sizes[1][0])
					caption.setStyle('width', captionwidth);
					caption.setHTML(photo.getTitle());
					
					block.addEvent('click', function(e) {
						this.darkboxIt(block.id);
					}.bind(this));

				}, this);

				// initialize Darkbox
				this.darkbox = new Darkbox('mainphoto', '', {
					outside_opacity: 0.95,
					outside_click: false,
					set_position: false,
					fade_duration: this.fade_duration
				});
				['darkbox_overlay', 'mainphoto'].each(function(item) {
					$(item).onclick = this.darkboxIt.bind(this);
					$(item).setStyle('cursor', 'pointer');
				}, this);
				$('darkbox_overlay').setStyles({
					width: screen.width,
					height: screen.height
				});
			},  // end initialize()
			
			// resize main photo & set position
			// TODO: set position
			resize: function(photo) {
				// get correct sizes
				var img = $('centerpiece').getFirst();
				var sizes = photo.getNewSizes(img);
				
				// set sizes
				img.setProperties(sizes);
				// $('centerpiece').setStyles(sizes);
				$('centerpiece').style.height = sizes['height'] + 'px';
				['centerpiece', 'h-title', 'h-description'].each(function(node) {
					$(node).style.width = sizes['width'] + 'px';
				});
				
				// set positions
				var shiftleft = (window.ie) ? 0 : Math.floor((window.getWidth() - sizes['width'] - 40) / 2);
				$('mainphoto').setStyles({
					'top': Math.floor(window.getHeight() / 50),
					'left': shiftleft
				});

			},  // end resize()
			
			darkboxIt: function(id) {
				// main photo: turn on darkbox
				if ($(id)) {
					this.darkbox.open();
				}
				// grid: turn off darkbox
				else {
					this.darkbox.close();
				}

				this.view(id);
			},  // end darboxIt()
			
			// type: 'grid', 'hybrid' (not yet), 'photo'
			// id: photo unique id or 0
			view: function(id) {
				// show main photo
				if ($(id)) {
					this.prev_id = id;
					$('container').setStyle('overflow', 'hidden');
					this.currentphoto = this.photos[id];
					this.setCenterpiece();
					if (!$('mainphoto').visible()) {
						this.darkbox.open();
					}
				}
				// show grid
				else {
					id = [0];		// id = 0 regardless
					$('container').setStyle('overflow', 'auto');
					if ($('mainphoto').visible()) {
						this.darkbox.close();
					}
				}

				this.history.setValue(0, id);
			},  // end view()
			
			// updates centerpiece image and sets controls
			// precondition: this.currentphoto must be up-to-date
			setCenterpiece: function() {
				var current = this.currentphoto;
				$('centerpiece').setHTML(current.buildImg('b'));
				this.resize(current);
				$('h-title').setHTML(current.getTitle());
				$('h-description').setHTML(current.description);
				// set href attributes
				$('hud-next').setProperty('href', current.getNext() || '#');
				$('hud-prev').setProperty('href', current.getPrev() || '#');
				// set additional functionality
				['prev', 'next'].each(function(control) {
					var button = $('hud-' + control);
					if (button.getProperty('href') == '#') button.addClass('disabled');
					else button.removeClass('disabled');
				}, this);
			}  // end setCenterpiece()
		});  // end Album
		
		var Photo = new Class({
			ignorelist: ['dsc_', "\\.jpg"],		// for testing regexp in getTitle()
			
			info: {
				id: 0,
				secret: '',
				server: 0,
				farm: 0,
				title: '',
				description: '',
				originalsecret: '',
				originalformat: '',
				tags: '',
				datetaken: '',
				sizes: []
			},  // end info{}
			
			// prev: false (if none) or previous Photo object unique id
			initialize: function(json_photo, prev) {
				$extend(this.info, json_photo);
				$H(this.info).each(function(value, key) {
					this[key] = value;
				}, this);
				
				this.setNext(false);
				this.setPrev(prev);
			},  // end initialize()
			
			// reflect: bool. If true, show a reflection. Default false.
			buildImg: function(size) {
				return ['<img src="', this.getUrl(size), '">'].join('');
			},  // end buildImg()
			
			uniqueId: function() {
				return [this.id, '_', this.secret].join('');
			},  // end uniqueId()
			
			// size: s, t, m, '' (default), b, o
			getUrl: function(size) {
				// temp return (NEED TO USE FARM, SECRET, ETC)
				var newsize = '';
				if (size != '') newsize = ['_', size].join('');
				if (size == 'o') return "kairos/2141122519_3ceb163daa_o.jpg";	// need to change this
				else return ['kairos/', this.uniqueId(), newsize, '.jpg'].join('');
			},  // end getUrl()
			
			// displayFilename: bool. If false (default), will not return titles with .jpg extension
			getTitle: function(displayFilename) {
				var title = this.title;
				if (!displayFilename && title.test(this.ignorelist.join('|'), 'i')) return '';
				return title;
			},  // end getTitle()
			
			// on resize (for main photo), calculate new sizes
			getNewSizes: function(img) {
				var bufferheight = $('hud').offsetHeight + 36;
				// sizes[3]: "large" format
				// w & h are constants: once set, they should never change
				var w = newwidth = this.sizes[3][0];
				var h = newheight = this.sizes[3][1];
				
				var maxheight = Window.getHeight() - 220;
				var maxwidth = Window.getWidth() - 170;
				
				// TODO: need to set minimum
				// TODO: need to take control height (or other elements) into account
				if (newwidth > maxwidth) {
					newwidth = maxwidth;
					newheight = Math.ceil((h / w) * maxwidth);
				}
				// NOT elseif
				if (newheight > maxheight) {
					newheight = maxheight;
					newwidth = Math.ceil((w / h) * maxheight);
				}
				
				return {
					'width': newwidth,
					'height': newheight					
				};
			}, // end getNewSizes()

			getPrev: function() {
				return this.prev;
			},
			getNext: function() {
				return this.next;
			},
			// param: false (if none) or prev/next Photo object unique id
			setPrev: function(photo_id) {
				this.prev = photo_id;
			},  // end setPrev()
			setNext: function(photo_id) {
				this.next = photo_id;
			}  // end setNext()
		});  // end Photo
		
		var album;
		
		window.addEvent('domready', function() {

			/**
			 * If you want to set options, set them here, otherwise initialize is
			 * called automatically when the first module is registered
			 */
			HistoryManager.initialize();
			
			/* initialize web gallery settings */
			$('container').setHeight('header');
			
			var tagwidth = 0;
			var extrasize = (window.ie6) ? 34 : 30;
			$$('#tagbar li').each(function(tag) {
				tagwidth += tag.getSize().size.x + extrasize;
			});
			$('tagbar').setStyle('width', tagwidth);

		 	album = new Album(json);
			
			HistoryManager.start();

			/* window resize */
			window.addEvent('resize', function() {
				$('container').setHeight('header');
				if (album.currentphoto) album.resize(album.currentphoto);
/*				if (album.darkbox.isopen) $('darkbox_overlay').setStyles({
					'width': window.getWidth(),
					'height': window.getHeight()
				})*/
			});
			
		});
	</script>
</head>

<body id="body">
<div id="header">
	<div id="topbar">
		<a id="buttonright" class="button" href="#">
			Return to Kairos
		</a>
		<a id="buttonleft" class="button" href="#">
			View Albums
		</a>
		<span id="title">
			<h1 id="titlename"> </h1>
			<span id="albumnumber"> </span>
		</span>
	</div>
	<div id="secondbar">
		<ul id="tagbar">
			<li><a href="#">kairos </a></li>
			<li><a href="#">kairos1</a></li>
			<li><a href="#">kairos2</a></li>
			<li><a href="#">kairos3</a></li>
		</ul>		
	</div>
</div> <!-- end #header -->

<div id="container">
	<!-- images must not be generated from js: issues with history and with safari -->
	<div id="1254061311_6f54e4649c" class="block hover"><div class="title"> </div><div class="wrapper"><img src="kairos/1254061311_6f54e4649c_m.jpg" class="reflect rheight30 ropacity25" /></div></div>
	<div id="1254921990_724afb6ccc" class="block hover"><div class="title"> </div><div class="wrapper"><img src="kairos/1254921990_724afb6ccc_m.jpg" class="reflect rheight30 ropacity25" /></div></div>
	<div id="919019739_40410d377d" class="block hover"><div class="title"> </div><div class="wrapper"><img src="kairos/919019739_40410d377d_m.jpg" class="reflect rheight30 ropacity25" /></div></div>
	<div id="1254059865_034ed4ba42" class="block hover"><div class="title"> </div><div class="wrapper"><img src="kairos/1254059865_034ed4ba42_m.jpg" class="reflect rheight30 ropacity25" /></div></div>
	<div id="1254059101_e52b55c375" class="block hover"><div class="title"> </div><div class="wrapper"><img src="kairos/1254059101_e52b55c375_m.jpg" class="reflect rheight30 ropacity25" /></div></div>
	<div id="1254058325_37cce3d8ae" class="block hover"><div class="title"> </div><div class="wrapper"><img src="kairos/1254058325_37cce3d8ae_m.jpg" class="reflect rheight30 ropacity25" /></div></div>
	<div id="1254057337_821f4ee155" class="block hover"><div class="title"> </div><div class="wrapper"><img src="kairos/1254057337_821f4ee155_m.jpg" class="reflect rheight30 ropacity25" /></div></div>

</div> <!-- end #container -->

<div id="mainphoto" class="darkbox" style="display:none;">
	<div id="h-title" class="title"> </div>
	<div id="centerpiece"> </div>
	<div id="h-description" class="description"> </div>
	<div id="hud">
		<a id="hud-prev" href="#" alt="Previous"></a>
		<a id="hud-next" href="#" alt="Next"></a>
	</div>
</div> <!-- end #mainphoto -->

<!--
<div id="footer">
</div> -->

</body>
</html>
